<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>通知</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<style>
			.noticedate{
				text-align: center;
				position: relative;
				margin-top:10px ;
				background: #fff;
			}
			.date{
				text-align: center;
				color: #282828;
				margin: 20px 0;
			}
			.datetime{
				color: #7b7b7b;
				font-size: 14px;
			}
			.noticedate span img{
				width: 0.4rem; 
			}
			.noticeleft{
				position: absolute;
				left: 1.3rem;
				top: 0.02rem;
			}
			.noticeright{
				position: absolute;
				right:1.3rem;
				top:0.02rem ;
			}
			ul.timeline {
		        list-style-type: none;
		        background: url("../../../images/version_line.jpg") repeat-y scroll 18px 0 transparent;
		    	padding: 0;
		    	background-size: 2px;
         	}
	       ul.timeline li {
	          position: relative;
	           margin-bottom: 20px;
	       }
	      ul.timeline li .time {
		       color: #fff;
		       text-align: center;
		       background: url("../../../images/datetime.png") no-repeat 0 transparent;
		       margin-left: 48px;
		       background-size: 55px;
		       width: 65px;
		       margin-bottom: 20px;
		       height: 23px;
		       line-height: 24px;
		       font-size: 14px;
	       }
        ul.timeline li .version {
           position: absolute;
           width: 290px;
          text-align: right;
           left: -200px;
           top: 30px;
            font-size: 40px;
            line-height: 50px;
           color: #3594cb;
           overflow: hidden;
        }
       ul.timeline li .number {
           position: absolute;
           background: url("../../../images/listbg.jpg") no-repeat scroll 0 0 transparent;
           width: 20px;
           height: 20px;
           top: 0px;
           left: 10px;
           line-height: 56px;
           text-align: center;
           color: #fff;
           font-size: 18px;
           background-size: 20px;
      }
        ul.timeline li.alt .number {
            background-image: url("../../../images/listbg.png");
       }
       ul.timeline li .dian{
            background: url("../../../images/listdian.png") no-repeat;
            background-size: 10px;
            width: 10px;
            height: 10px;
            display: block;
            float: left;
            margin-top: 30px;
       }
        ul.timeline li .content {
         	margin-left: 14px; 
         	background:url("../../../images/jiantou.png") 24px center no-repeat;
        }
       ul.timeline li .content .contentBox {
         	background: #fff;
         	margin-left: 33px;
         	margin-bottom: 10px;
            padding:10px 0 10px 10px
       }
        .notice-main ul li{
        	background: none;
        	padding: 0;
        }
        ul.timeline li .content .contentBox .title{
        	padding-bottom: 10px;
        	width: 200px;
	        overflow: hidden;/*超出部分隐藏*/
	        white-space: nowrap;/*不换行*/
	        text-overflow:ellipsis;/*超出部分文字以...显示*/
        }
        ul.timeline li .content .contentBox .author{
        	color: #7b7b7b; 
        }
		</style>
	</head>

	<body>

	<div id="list"> 
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff!important;">
			<div class="mui-scroll">
			<div class="noticedate">
				<span class="noticeleft" @tap="timechange(1)"><img src="../../../images/noticeleft_03.png" /></span>
				<div class="date">
				
					<div class="datetime" id="datetime"></div>
				</div>
				<span class="noticeright" @tap="timechange(2)"><img src="../../../images/noticeright_03.png" /></span>
			</div>
			<div class="notice-main mmt20">
				<ul class="timeline">
				    <li v-for="item in items" @tap="open_detail(item)">
				        <div class="time">{{item.time}}</div>
						<div class="version"></div>
						<div class="number"></div>
						<div class="content">
							<span class="dian"></span>
						 	<div class="contentBox">
						   		<div class="title">{{item.title}}</div>
						   		<div class="author">{{item.institution_name}}</div>
						   	</div>
						</div>
				    </li>
   				 </ul>
			</div>
			</div>
		</div>
		</div>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/token.js"></script> 
		<script>
			
			var pages = 1;
			var agotime = '';
			var state = app.getState();
			var memberToken = state.memberToken;
			var childid = state.childid 
			var tt=new Date().getTime();
			  
			var back=new Date(tt + 24*60*60*1000); 
			var nowdate=new Date(tt)
			var nowyear=nowdate.getFullYear();
			var nowmonth=nowdate.getMonth()+1;
			if(nowmonth<10){
				nowmonth='0'+nowmonth
			}
			var nowdate=nowdate.getDate()
			if(nowdate<10){
				nowdate='0'+nowdate
			}
			var nowtime=nowyear+'年'+nowmonth+'月'+nowdate+'日';
			var nowtimea=nowyear+'-'+nowmonth+'-'+nowdate;
			
			
			mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					auto:true,
					callback: function() {
						pages = 1
						pulldownRefresh(pages)
					}
				},
				up: {
					contentrefresh: '正在加载...',
					callback: function() {
						pages++;
						pullupRefresh(pages)
					}
				}
			}

		});
			
				
				
				
			mui.plusReady(function() { 
				  
				document.getElementById('datetime').innerHTML=nowtime;
				var data = {
					uid: state.userid,
					type:'1',
					memberToken: memberToken,
					page:1,
					child_id : childid	
				};				 
				mui.post(Apiurl+'index/notice_new', data, function(data) {
					//alert(JSON.stringify(data)) 
					if (data.list && data.list.length > 0) {
                    	pullrefresh.items = data.list
                	}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				}, 'json');
				
			});
			//下拉刷新
			function pulldownRefresh(pages) {
				
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				var data = {
					uid: state.userid,
					type:'1',
					memberToken: memberToken,
					time:agotime,
					child_id : childid	
					
				};
				data.page=pages;
				
				mui.post(Apiurl+'index/notice_new', data, function(data) {
					//alert(JSON.stringify(data))
					if (data.list && data.list.length > 0) {
                    	pullrefresh.items = data.list
                	}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				}, 'json');
				
			}
			//上拉加载
			function pullupRefresh(pages) {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}
				
				var data = {
					uid: state.userid,
					type:'1',
					time:nowtimea,
					memberToken: memberToken,
					child_id : childid	
				};
				data.page=pages;
				//请求历史列表信息流
				mui.post(Apiurl+'index/notice_new', data, function(data) {
					
					if (pages <= data.pagecount) {
	                    if (data.list && data.list.length > 0) { 
	                        pullrefresh.items = pullrefresh.items.concat(data.list);
	                    }
                	}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				}, 'json');
			}
		
			var pullrefresh = new Vue({
				el: '#pullrefresh',
				data: {
					items: [] //列表信息流数据
				},
				methods: {
					timechange: function(aspect){
						if(aspect==1){
							var ago=new Date(tt - 24*60*60*1000);  
							agob=tt - 24*60*60*1000;
						}else if(aspect==2){ 
							var ago=new Date(tt + 24*60*60*1000);  
							agob=tt + 24*60*60*1000;
						}
						var agoyear=ago.getFullYear();
						var agomonth=ago.getMonth()+1;
						var agodate=ago.getDate();
						if(agomonth<10){
							agomonth='0'+agomonth
						}
						if(agodate<10){
							agodate='0'+agodate
						}
						agotime=agoyear+'-'+agomonth+'-'+agodate;
						var agotimetop=agoyear+'年'+agomonth+'月'+agodate+'日';
						tt=agob;
						document.getElementById('datetime').innerHTML=agotimetop; 
						var data = {
							uid: state.userid,
							type:'1',
							time:agotime,
							memberToken: memberToken,
							page:1,
							child_id : childid	
						};
						mui.post(Apiurl+'index/notice_new', data, function(data) {
							//alert(JSON.stringify(data))
							if(data.status==201){
								pullrefresh.items=""
							}else{
								pullrefresh.items = data.list; 
							}
								
							
						}, 'json');
					},
					open_detail: function(item) {
						mui.openWindow({
							url: 'notice_detail.html',
							id: 'noticedetail',
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView = { //详情页原生导航配置
									autoBackButton: true, //自动绘制返回箭头
									backgroundColor: '#25aae3', //导航栏背景色
									titleText: "详细信息", //导航栏标题
									titleColor: '#F7F7F7', //文字颜色
									//coverage:"120px",
									//type: 'transparent', //透明渐变样式
									splitLine: { //底部分割线
										color: '#cccccc'
									}
								}
							},
							extras: {
								noticeid: item.id,
								userid: state.userid
							}
						});
					},
					
				}
			});
			
		</script>
	</body>

</html>